<template>
  <div>
    <el-carousel height="550px" :autoplay="true" :interval="3000">
      <el-carousel-item v-for="(item, index) in arr" :key="index" class="IMG22">
        <img :src="item.src" alt="" class="dandan">
      </el-carousel-item>
    </el-carousel>
    <el-card class="card2 container">
      <el-row type="flex">
        <el-col :span="12">
          <div class="twolineIMG">
            <img src="@/assets/Logo1.png" style="height: 400px" alt="" />
            <div class="h21">
              <h2>
                大笨钟邮局的<br />
                企业文化和价值观
              </h2>
              <h4>
                “让每一位消费者都能在大笨钟邮局愉悦的找到一个家”是大笨钟邮局最大的梦想。我们珍惜每一位客户的托付，客户的信赖是我们最大的动力。我们并不完美，但我们相信一群充满梦想的人，凭借着爱与执着，可以不断提升客户服务体验，推动行业的进步与规范，让房产交易变得更加轻松和愉悦。
              </h4>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <el-card>
            <h2>公司历史</h2>
            <div>
              自创始人Chocobo于 1913年开始在英国伦敦开始卖房，已经过去了将近
              110年的时光。
              在这一个多世纪的时光里，大笨钟邮局企业也经历了无数的风风雨雨，企业几易其主，经历了产地转移、合作、产品拆分、管理层收购、IPO、退市、增资、并购等各种管理模式。

              <br />
              如果执拗地遵循大笨钟邮局这个组合词的本意—— 上摆下寄，大笨钟邮局从
              1914 年开始就已经不能被称作大笨钟邮局了。因为那年，公司就破产了。
              <br />
              笔者仅以此文简要梳理一下大笨钟邮局公司的历史。
            </div>
            <el-row type="flex" class="img1">
              <el-col :span="12">
                <img src="@/assets/Logo(1).png" style="height: 180px" alt="" />
              </el-col>
              <el-col :span="12">
                <div>
                  <h3>大笨钟邮局旧址(1913)</h3>
                  <div>公司地址：英国伦敦看到大笨钟往左拐五米</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
        <el-card>
    <el-row type="flex" justify="start" class="container">
      <el-col>
        <h2 class="h212">
        荣誉墙
        </h2>
      </el-col>
    </el-row>
        </el-card>
    <el-carousel :interval="8000" type="card"  height="310px">
      <el-carousel-item v-for="item in imgArr" :key="item.id" >
        <h3  >
          <img :src="item.demo" alt="" style="height: 100%; width: 845px" />
        </h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgArr: [
        { id: 0, demo: require("@/assets/certify01.png") },
        { id: 1, demo: require("@/assets/certify02.png") },
        { id: 2, demo: require("@/assets/certify03.png") },
        { id: 3, demo: require("@/assets/certify04.png") },
        { id: 4, demo: require("@/assets/certify05.png") },
      ],
      arr: [
        { src: require('../../assets/首页/01.jpeg') },
        { src: require('../../assets/首页/02.jpeg') },
        { src: require('../../assets/首页/03.jpeg') },
        { src: require('../../assets/首页/04.jpeg') }
      ]
    };
  },
  methods: {},
};
</script>

<style lang="scss">

.IMG22{
  img {
      width: 100%;
      animation: a 0.5s infinite;
    }
}
.ff {
  position: relative;
}
.w {
  width: 100%;
  overflow: hidden;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
::v-deep.dandan {
  width: 100%;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.h212{
  font-weight: 300;
}
.card2 {
  height: 480px;
  margin-top: 15px;
}
.twolineIMG {
  display: flex;
  img {
    box-shadow: 5px 5px 5px black;
    margin-top: 15px;
    border-radius: 5px;
  }
}
.h21 {
  margin-top: 40px;
  h2 {
    margin: 25px 20px;
  }
  h4 {
    margin: 0 25px;
  }
}
.img1 {
  img {
    box-shadow: 3px 3px 3px black;
  }
  div {
    margin-top: 15px;
  }
}
.ff {
  position: relative;
}
.w {
  width: 100%;
  // overflow: hidden;
}
.container {
  width: 1240px;
  margin: 15px auto;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
